import React, { useState } from 'react'
import { NavBar, Button, SearchBar, Space, Toast } from 'antd-mobile'
import { DeleteOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { addList, addDel } from '../../store/modules/cart.jsx'
import { useDispatch, useSelector } from 'react-redux'
import '../../static/SearchOrder/SearchOrder.css'
export default function SearchOrder() {
    const [title, setTitle] = useState('')
    const navigate = useNavigate()
    const dispatch = useDispatch()
    const list = useSelector(state => state.cart.list)

    const back = () => {
        navigate(-1)
    }
    const handleClick = () => {
        navigate(`/order?title=${title}`)
        // console.log('a');
        let obj = {
            id: Math.floor(Math.random() * 100000),
            title: title,
            state: false
        }
        dispatch(addList(obj))
    }
    const handleSearch = (data) => {
        navigate(`/order?title=${data}`)
    }
    const handleDel = () => {
        dispatch(addDel())
    }
    return (
        <div className='searchOrder_search'>
            <div style={{ marginTop: '2rem' }}>
                <NavBar onBack={back}>
                    <SearchBar placeholder='请输入内容' showCancelButton={() => true} style={{ '--background': 'white', }} cancelText='搜索' onCancel={() => handleClick()} value={title} onChange={(e) => setTitle(e)} />
                </NavBar>
            </div>
            <div className='searchOrder_history'>
                <div className='searchOrder_history_title'>
                    <span>历史记录</span>
                    <span><DeleteOutline onClick={() => handleDel()} /></span>
                </div>
                <div className='searchOrder_s_content'>
                    {
                        list.map((item, index) => {
                            return (
                                <span className='span' onClick={() => handleSearch(item.title)}  >{item.title}</span>
                            )
                        })
                    }
                </div>
            </div>
        </div>
    )
}
